<template>
	<view class="main" style="height: 100%;display: flex;flex-direction: column;" @touchmove.stop.prevent="() => {}">
		<view class="top" style="height: 45px;">
			<view class="up" style="display: flex;margin-left: 8px;margin-top: 8px;width: 130px;">
				<u-button text="待接单" :custom-style="notOrder" @click="toggleButton('not')"></u-button>
				<u-button text="已接单" :custom-style="isOrder" @click="toggleButton('is')"></u-button>
			</view>
			<view class="down">
				<div style="margin-top: 8px;">
					<u-line></u-line>
				</div>
			</view>
		</view>
		<view class="bottom" style="flex:1;overflow: auto;">
			<!-- 待接单模块 -->
			<u-list v-if="bottonStatus==='待接单'">
				<u-list-item v-for="(item,index) in ywNotList" :key="index">
					<div style="height: 176px;margin-left: 12px;margin-right: 12px;">
						<div style="display: flex;">
							<!-- <div class="left">
								<image :src="imageUrl" style="width: 92px;height: 81px;margin-top: 20px;"></image>
							</div> -->
							<div class="right" style="margin-top: 12px;margin-left: 6px;">
								<div style="display: flex;justify-content: space-between;">
									<div style="font-size: 16px;font-family: 'PingFang SC';color: #212121;">
										{{ item.sjbh }}
									</div>
									<div>
										<u--text :text="item.czjg" size="14px" color="#F75755"></u--text>
									</div>
								</div>
								<div :style="{fontFamily: 'Noto Sans CJK SC',color: '#666666',fontSize: '14px',marginTop:'4px',width:'90vw'}">{{ item.sjms }}</div>
								<div style="margin-top: 7px;display: flex;">
									<u-icon name="map" color="#666666" size="12"></u-icon>
									<text style="margin-left: 8px;font-family: 'Noto Sans CJK SC';color: #999999;font-size: 12px;">{{ item.sjwz }}</text>
								</div>
								<div style="margin-top: 4px;display: flex;">
									<u-icon name="clock" color="#666666" size="12"></u-icon>
									<text style="margin-left: 8px;font-family: 'Noto Sans CJK SC';color: #999999;font-size: 12px;">{{ item.fssj }}</text>
								</div>
								<div style="margin-top: 12px;display: flex;width: 45vw;margin-left: -12px;">
									<u-button @click="detailYWXX(item)" color="#FF5000" style="border-radius: 4px;width: 74px;height: 32px;">
										<text style="font-size: 12px;color: #FFFFFF;font-family: 'PingFang SC';">任务详情</text>
									</u-button>
									<u-button @click="taskIN(item)" color="#FFFFFF" style="border-radius: 4px;width: 74px;height: 32px;border: 1px #DDDDDD solid;margin-left: 5px;">
										<text style="font-size: 12px;color: #212121;font-family: 'PingFang SC';">任务接收</text>
									</u-button>
								</div>
							</div>
						</div>
					</div>
					<div>
						<u-line></u-line>
					</div>
				</u-list-item>
			</u-list>
			
			<!-- 已接单模块 -->
			<u-list v-if="bottonStatus==='已接单'">
				<u-list-item v-for="(item,index) in ywIsList" :key="index" >
					<div style="height: 176px;margin-left: 12px;margin-right: 12px">
						<div style="display: flex;"  @click="detailYW(item)">
							<!-- <div class="left">
								<image :src="imageUrl" style="width: 92px;height: 81px;margin-top: 20px;"></image>
							</div> -->
							<div class="right" style="margin-top: 12px;margin-left: 6px;">
								<div style="display: flex;justify-content: space-between;">
									<div style="font-size: 16px;font-family: 'PingFang SC';color: #212121;">
										{{ item.sjbh }}
									</div>
									<div>
										<u--text :text="item.czjg" size="14px" :color="item.czjg=='处理中'?'#10AEFF':'#07C160'"></u--text>
									</div>
								</div>
								<div style="width: 90vw;font-family: 'Noto Sans CJK SC';color: #666666;font-size: 14px;margin-top: 4px;">{{ item.sjms }}</div>
								<div style="margin-top: 7px;display: flex;">
									<u-icon name="map" color="#666666" size="12"></u-icon>
									<text style="margin-left: 8px;font-family: 'Noto Sans CJK SC';color: #999999;font-size: 12px;">{{ item.sjwz }}</text>
								</div>
								<div style="margin-top: 4px;display: flex;">
									<u-icon name="clock" color="#666666" size="12"></u-icon>
									<text style="margin-left: 8px;font-family: 'Noto Sans CJK SC';color: #999999;font-size: 12px;">{{ item.fssj }}</text>
								</div>
							</div>
						</div>
						<div v-show="item.czjg=='处理中'" style="margin-top: 12px;display: flex;width: 45vw;margin-left: -6px;">
							<u-button @click="detailYWXX(item)" color="#FF5000" style="border-radius: 4px;width: 74px;height: 32px;">
								<text style="font-size: 12px;color: #FFFFFF;font-family: 'PingFang SC';">任务详情</text>
							</u-button>
							<u-button @click="detailYW(item)" color="#FFFFFF" style="border-radius: 4px;width: 74px;height: 32px;border: 1px #DDDDDD solid;margin-left: 5px;">
								<text style="font-size: 12px;color: #212121;font-family: 'PingFang SC';">任务反馈</text>
							</u-button>
						</div>
						<div v-show="item.czjg=='已完成'" style="margin-top: 12px;display: flex;width: 20vw;">
							<u-button @click="detailYWXX(item)" color="#FF5000" style="border-radius: 4px;width: 74px;height: 32px;">
								<text style="font-size: 12px;color: #FFFFFF;font-family: 'PingFang SC';">任务详情</text>
							</u-button>
						</div>
					</div>
					<div>
						<u-line></u-line>
					</div>
				</u-list-item>
			</u-list>
		
		</view>
	</view>
</template>

<script>

import croods from '@/common/croods-1.3.3.js';     window.croods = croods;  window.hydra =  require('../../common/wst_hydra-1.0.0.js');


	import coordtransform from 'coordtransform';
	import {getDateDic,getNotAssign,getAssign,handleAssgin} from "@/common/api.js"
	export default{
		onLoad(){
			this.getStatusL()
			this.getNotAssignL()
			this.getAssignL()
		},
		data(){
			return{
				/* 事件状态 */
				status:{
				  status: "Enabled",
				  type: "EVENT_HANDLE_STATUS"
				},
				statusList:[],
				/* 按钮样式 */
				notOrder:{
					backgroundColor: "rgba(255, 80, 0, 0.1)",
					color: "#FF5000",
					width: "60px",
					height: "28px",
					borderRadius: "16px"
				},
				isOrder:{
					backgroundColor: "#F9F9F9",
					color: "#212121",
					width: "60px",
					height: "28px",
					borderRadius: "16px",
				},
				/* 参考值 */
				bottonStatus:'待接单',
				request:{
					pageNum:1,
					pageSize:10
				},
				/* imageUrl:require("../../../static/icons/xjyw/image.jpg"), */
				/* 数据 */
				ywNotList:[],
				ywIsList:[]
			}
		},
		methods:{
			refresh(){
				this.getStatusL()
				this.getNotAssignL()
				this.getAssignL()
			},
			/* 查询事件状态数据字典 */
			getStatusL(){
				getDateDic(this.status).then(response => {
					this.statusList = response
				})
			},
			/* 获取分配给该用户的代办工单 */
			getNotAssignL(){
				getNotAssign(this.request).then(response => {
					this.ywNotList = []
					this.ywNotList = response.list;
					this.ywNotList.forEach(item => {
						let statusTemp = this.statusList.find(status => status.code === item.czjg);
						if (statusTemp) {
						  item.czjg = statusTemp.name;
						}
					})
				})
			},
			/* 获取该用户的已接单 */
			getAssignL(){
				getAssign(this.request).then(response => {
					this.ywIsList = []
					this.ywIsList = response.list;
					this.ywIsList.forEach(item => {
						let statusTemp = this.statusList.find(status => status.code === item.czjg);
						if (statusTemp) {
						  item.czjg = statusTemp.name;
						}
					})
				})
			},
			/* 按钮事件 */
			toggleButton(e){
				this.setBottonColor();
				if(e==="not"){
					this.bottonStatus = '待接单';
					this.notOrder.backgroundColor = "rgba(255, 80, 0, 0.1)";
					this.notOrder.color = "#FF5000";
					this.getNotAssignL()
					
				}else if(e==="is"){
					this.bottonStatus = '已接单';
					this.isOrder.backgroundColor = "rgba(255, 80, 0, 0.1)";
					this.isOrder.color = "#FF5000";
					this.getAssignL()
					
				}else{
					this.bottonStatus = '待接单';
					this.notOrder.backgroundColor = "rgba(255, 80, 0, 0.1)";
					this.notOrder.color = "#FF5000";
					this.getNotAssignL()
					
				}
			},
			/* 重置样式 */
			setBottonColor(){
				this.notOrder.backgroundColor = "#F9F9F9";
				this.notOrder.color = "#212121";
				this.isOrder.backgroundColor = "#F9F9F9";
				this.isOrder.color = "#212121";
			},
			/* 跳转详情 */
			detailYW(item){
				if(item.czjg==="已完成"){
					this.detailYWXX(item)
				}else{
					uni.navigateTo({
						url:`/pages/xjyw/ywxq/index?id=${item.id}`,
					})
				}
			},
			/* 用户接单 */
			taskIN(item){
				let temp = {
					id:item.id
				}
				handleAssgin(temp).then(response => {
					
				})
				this.toggleButton("is")
			},
			/* 任务详情 */
			detailYWXX(item){
				uni.navigateTo({
					url:`/pages/xjyw/ywxx/index?ywid=${item.id}`,
				})
			}
		},
		async mounted(){
			await this.getStatusL()
			this.getNotAssignL()
			this.getAssignL()
		}
	}
</script>

<style>
</style>